<template>
  <div class="overview-content">
    <el-row :gutter="32">
      <el-col :xs="24" :sm="24" :lg="24" style="margin-bottom:20px;">
        <div class="chart-wrapper ">
          <div class="divUl">
            <div class="titleDiv">
              {{ address }}
              <span>交接中 [闲置房源]</span>
            </div>

            <div class="flex-row  jus two">
              <p class="countFsColor" @click="goBack">返回</p>
              <p v-show="!finished" class="countFsColor" @click="objMo.show = true">中止流程</p>
            </div>
            <div class="inputTop">
              <varcla-tab :table-data="arr" :active="active" :step="+step" @getTabIndex="getTabIndex" />
              <div class="formdiv">
                <step-1 v-if="active == 0" :id="processId" :handover-info="handoverInfo" @jump=" jump " @next="next" @edit="edit" />
                <step-2 v-if="active == 1" :id="processId" :handover-info="handoverInfo" @jump=" jump " @next="next" @edit="edit" />
                <step-3 v-if="active == 2" :id="processId" :handover-info="handoverInfo" @jump=" jump " @next="next" @edit="edit" />
                <step-4 v-if="active == 3" :id="processId" :handover-info="handoverInfo" @jump=" jump " @next="next" @edit="edit" />
                <step-5 v-if="active == 4" :id="processId" :handover-info="handoverInfo" @jump=" jump " @next="next" @edit="edit" />
                <finish v-if="active == 5" :finish-info="finishInfo" @back="back" />
              </div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>

    <myModal :obj="objFour" @close="close" @save="confirmJump">
      <div class="mpdalBody">
        <el-input
          v-model="jumpForm.jumpNote"
          type="textarea"
          placeholder="请输入内容"
          maxlength="200"
          show-word-limit
        />
      </div>
    </myModal>

    <myModal :obj="objMo" @close="objMo.show=false" @save="confirmDel">
      <div class="mpdalBody">
        <p>确认终止？</p>
      </div>
    </myModal>
  </div>
</template>

<script>
import VarclaTab from './varclaTab.vue'
import myModal from '@/components/Modal'
import { Step1, Step2, Step3, Step4, Step5, Finish } from './idleHandoverSteps'
import {
  getIdleHandoverinfo,
  delIdleHandoverByHouseId,
  idleJump
} from '@/api/handover'
export default {
  components: {
    VarclaTab,
    myModal,
    Step1,
    Step2,
    Step3,
    Step4,
    Step5,
    Finish
  },
  data() {
    return {
      active: 0,
      show: false,
      arr: [
        { id: 0, name: '待提供钥匙联系人' },
        { id: 1, name: '待确认交接日期' },
        { id: 2, name: '待上传交接清单' },
        { id: 3, name: '待确认验房时间' },
        { id: 4, name: '待上传验房结果' },
        { id: 5, name: '交接完成' }
      ],
      objMo: {
        show: false,
        title: '确认终止',
        width: '400px'
      },
      objFour: {
        show: false,
        title: '请填写跳过理由',
        width: '647px'
      },
      houseId: this.$route.query.houseId,
      processId: this.$route.query.processId,
      step: undefined,
      address: this.$route.query.address,
      jumpForm: {
        jumpNote: '',
        jumpStep: ''
      },
      handoverInfo: {},
      finishInfo: {},
      finished: false,
      tempFormData: {}
    }
  },
  created() {
    console.log(this.processId)
    this.getInfo()
  },
  methods: {
    async getInfo(edit) {
      const res = await getIdleHandoverinfo(this.processId)
      if (res.code === 200) {
        this.handoverInfo = res.data
        this.step = res.data.step
        if (edit) {
          return
        }
        this.getStep()
      }
    },
    save() {
      this.jumpForm.jumpStep = this.active + 1
      this.confirmJump()
    },
    close() {
      this.objFour.show = false
    },
    back() {
      this.$router.push({ path: 'page' })
    },
    goBack() {
      this.$router.go(-1)
    },
    getStep() {
      this.active = this.step - 1
    },
    getTabIndex(val) {
      const step = this.step
      if (this.active * 1 === 5) {
        this.$message({
          message: '交接已完成，不可更改！',
          type: 'error'
        })
        return false
      }
      if (val < step) {
        this.active = val
      }
    },
    async confirmDel() {
      const delRes = await delIdleHandoverByHouseId(this.processId)
      if (delRes.code === 200) {
        this.$message({
          message: '操作成功！',
          type: 'success'
        })
      }
      this.objMo.show = false
      this.goBack()
    },
    jump(formData) {
      this.objFour.show = true
      this.tempFormData = formData
    },
    next(val) {
      if (val) {
        this.active++
        this.finished = true
        this.finishInfo = { ...val }
      } else {
        this.active++
        this.getInfo()
      }
    },
    edit() {
      this.getInfo(1)
    },
    async confirmJump() {
      this.jumpForm.jumpStep = this.active + 1
      const params = {
        ...this.jumpForm,
        ...this.tempFormData,
        id: this.processId
      }
      const jumpRes = await idleJump(params)
      if (jumpRes.code === 200) {
        this.jumpForm.jumpNote = ''
        this.active++
        this.objFour.show = false
        if (this.active === 5) {
          this.finished = true
          this.finishInfo = { ...jumpRes.data }
          return
        }
        this.getInfo()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.countFsColor{
  cursor: pointer;
}
.mpdalBody p{
  padding: 20px;
  text-align: center;
  font-size:20px
}
.myBnt {
  color: #5ac6b7;
  display: block;
  width: 100px;
  margin-left: 115px;
  margin-bottom: 20px;
  border: 0;
}
.divUl {
  margin: 0px auto 0 auto;
}
h5,
p {
  padding: 0;
  margin: 0;
}
.ulMy {
  flex-wrap: wrap;
  width: 166px;
  padding-left: 10px;
}
.ulMy li {
  width: 100%;
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  height: 40px;
  line-height: 40px;
}
.ulMy li i {
  color: #6a6a6a;
  font-size: 13px;
  align-self: self-start;
  margin-top: 23px;
}
.ulMy li p {
  color: #6a6a6a;
  font-size: 13px;
}
.ulMy li h5 {
  font-size: 16px;
  color: #151515;
  margin-bottom: 10px;
}
.ulMy li div {
  background: #fff;
  margin-left: 0px;
  flex: 1;
  padding: 0px;
  box-sizing: border-box;
  border-radius: 2px;
  text-align: center;
  font-size: 12px;
}
.ulMy li em {
  color: #5ac6b7;
  margin-left: 3px;
}
.ulMy li dfn {
  color: #5ac6b7;
  margin-top: 3px;
  font-size: 12px;
  display: block;
  margin-top: 10px;
}
.ulMy li.not {
  color: #ccc;
}
.ulMy li.not h5 {
  font-size: 16px;
  color: #ccc;
  margin-bottom: 10px;
}
.ulMy li.not div {
  background: #fff;
  margin-left: 0px;
  flex: 1;
  padding: 0px;
  box-sizing: border-box;
  border-radius: 2px;
}
.ulMy li.not p {
  color: #ccc;
}
.overview-content {
  min-height: calc(100vh - 160px);
  background: #eee;
}
.myDigo h2 {
  background: #343436;
}
::v-deep .myDigo .el-dialog__footer {
  background: #e5e9ed;
  padding-top: 15px;
}
::v-deep .el-dialog.myDigo .el-dialog__body {
  padding: 0;
}
::v-deep .el-dialog.myDigo .el-dialog__header {
  display: none;
}
.el-dialog.myDigo h2 {
  height: 58px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 39px;
  padding-right: 39px;
  color: #fff;
  font-size: 18px;
  padding-top: 0;
  margin-top: 0;
  overflow: hidden;
  font-weight: normal;
  font-family: "SourceHanSansSC-regular";
}
.el-dialog.myDigo h2 i {
  font-size: 26px;
  cursor: pointer;
}
::v-deep .el-dialog.myDigo .el-dialog__body {
  text-align: left;
}
.formDiv {
  padding-left: 39px;
  padding-right: 39px;
  background: #fff;
}
.divSE {
  text-align: center;
}
.divSE em {
  display: block;
}
.fileWD {
  font-size: 46px;
  color: #5ac6b7;
}
.titleDiv {
  background: #5ac6b7;
  padding-left: 20px;
  color: #fff;
  height: 60px;
  line-height: 60px;
}
.two {
  margin: 10px 0;
  font-size: 13px;
  padding-left: 10px;
  padding-right: 10px;
}
.overview-tabs {
  background: #6a6a6a !important;
}
.inputTop {
  display: flex;
  justify-content: space-between;
}
.el-upload__tip {
  display: inline-block;
}
.formdiv {
  width: calc(100% - 200px);
}
.p1 {
  font-size: 12px;
  color: #d0d0d0;
}
::v-deep .el-checkbox {
  width: 190px;
}
</style>
